<template>
  <div class="step flex-row">
    <div class="step-head">
      <slot name="step-head"></slot>
    </div>
    <div class="step-body">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: [],
  data() {
    return {};
  },
  watch: {
    value(fresh, old) {
      if (!this.isfocus || !this.text) {
        this.text = fresh;
      }
    },
  },
  methods: {},
};
</script>
<style>
.step {
}
.step-head {
  flex-shrink: 0;
  width: 30px;
  justify-content: center;
  /* align-items: center; */
  display: flex;
  position: relative;
}
.step-head::before {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -1px;
  top: 0px;
  bottom: -20px;
  border-left: 1px dashed #ddd;
  z-index: -1;
}
.step-body {
  flex-grow: 1;
  overflow: auto;
}
</style>
